/**
 * 自定义三维面板
 */
class CustomPanel {
  viewer: any;
  PanelSource: any;

  handler: any;
  panelPosition: any;

  constructor(viewer: any, PanelSource:any) {
    this.viewer = viewer;
    this.PanelSource = PanelSource;
  }
  init(node: any) {
    this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas) // event事件处理程序
    this.handler.setInputAction((e) => {
      // 记录当前点击的世界坐标 方便每帧监听使用
      this.panelPosition = this.viewer.scene.pickPosition(e.position)
      // 点击的位置显示面板
      node.style.left = e.position.x - 100 + 'px';
      node.style.top = e.position.y - 210 + 'px';
      node.style.display = 'block';
      this.PanelSource.entities.add({
        // 添加点击的点位
        position: this.panelPosition,
        point: {
          color: Cesium.Color.RED, //点位颜色
          pixelSize: 10, //像素点大小
        },
      })
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    
    this.viewer.scene.postRender.addEventListener(() => {
      // 每一帧都去计算气泡的正确位置
      if (this.panelPosition) {
        const { x, y, z } = this.panelPosition
        const { x: resultX, y: resultY } =
          Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, {
            x,
            y,
            z,
          })
          node.style.left = resultX - 100 + 'px'
          node.style.top = resultY - 210 + 'px'
      }
    })
  }
}

export default CustomPanel;